<template>
  <div class="panel">
    <panel-title title="搜索词分析"></panel-title>
    <div class="panel-body">
      <!--搜索框-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="searchCrawlDate" type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-button @click="cleanSearch"><i class="fa el-icon-close"></i>&nbsp;清空</el-button>
        <el-button type="primary" @click="getKeywordData"><i class="fa fa-search"></i>&nbsp;查询</el-button>
      </el-form>
    </div>
    <word-cloud-chart :key="'keyword'" v-if="keywordData.length>0 " :wordCloudData="keywordData"></word-cloud-chart>
  </div>
</template>
<script>
  import {panelTitle} from 'components'
  import wordCloudChart from '../../components/chart/wordCloudChart'


  export default {
    data() {
      return {
        keywordData: [],
        searchCrawlDate: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        },
      }
    },
    components: {
      panelTitle,
      wordCloudChart
    },
    created() {
      this.getKeywordData()
    },
    methods: {
      //获取数据
      getKeywordData() {
        this.$fetch.apiKeyword.getKeywordData({
          //查询参数
          startDate: this.searchCrawlDate[0],
          endDate: this.searchCrawlDate[1]
        }).then(({data: data}) => {
          this.keywordData = data;
        })
      },
      cleanSearch() {
        this.searchCrawlDate = []
      },
    },
  }
</script>

<style>
</style>
